"use client";
import React, {useState} from "react";
import {
  Tooltip,
  ActionIcon,
  Modal,
  Stack,
  NumberInput,
  Text,
  Button,
  Group,
  Divider,
} from "@mantine/core";
import {useDisclosure} from "@mantine/hooks";
import {DataTable, DataTableColumn} from "mantine-datatable";
import {IconLinkPlus, IconPlugConnected, IconSearch} from "@tabler/icons-react";
import {useForm} from "@mantine/form";

export const ConnectAnalysis = ({disabled}: {disabled: boolean}) => {
  const [loading, setLoading] = useState(false);
  const [opened, {open, close}] = useDisclosure(false);
  const form = useForm({
    mode: "uncontrolled",
    initialValues: {threshold: 1200},
    // validate: {},
  });

  const handleSubmit = form.onSubmit((values) => {
    setLoading(true);
    console.log(values);
  });
  return (
    <>
      <Tooltip
        label="直连分析"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
        onClick={open}
      >
        <ActionIcon variant="light" color="indigo" disabled={disabled}>
          <IconPlugConnected size={16} />
        </ActionIcon>
      </Tooltip>

      <Modal opened={opened} onClose={close} title="直连分析" size="xl">
        <Stack gap="xs">
          <form onSubmit={handleSubmit}>
            <Stack gap="xs">
              <NumberInput
                label="直连阈值（Gbps）"
                placeholder="请输入直连阈值"
                key={form.key("threshold")}
                {...form.getInputProps("threshold")}
                min={0}
              />
              <Button
                type="submit"
                fullWidth
                loading={loading} // 可选的 loading 状态
                leftSection={<IconSearch size={16} />}
              >
                查询该阈值下的直连分析结果
              </Button>
            </Stack>
          </form>
          <Divider variant="dashed" py="md" />
          <Group justify="space-between">
            <Text size="sm" fw={500}>
              分析结果（大于阈值，建议增加直连）：
            </Text>
            <Text size="sm" c="dimmed">
              点击按钮即可增加直连
            </Text>
          </Group>
          <ConnectAnalysisTable />
        </Stack>
      </Modal>
    </>
  );
};

interface ConnectAnalysisProps {
  id: string;
  nodeAId: string;
  nodeAName: string;
  nodeZId: string;
  nodeZName: string;
  traffic: number;
}

const mock: ConnectAnalysisProps[] = [
  {
    id: "1",
    nodeAId: "CB11001",
    nodeAName: "北京_N2_BB_5",
    nodeZId: "CB55001",
    nodeZName: "乌鲁木齐_N2_BB_5",
    traffic: 1300,
  },
  {
    id: "2",
    nodeAId: "CB11001",
    nodeAName: "北京_N2_BB_5",
    nodeZId: "CB46001",
    nodeZName: "海口_N2_BB_3",
    traffic: 1600,
  },
];

const renderColumns: DataTableColumn<ConnectAnalysisProps>[] = [
  {accessor: "nodeAName", title: "节点名称"},
  {accessor: "nodeZName", title: "节点名称"},
  {accessor: "traffic", title: "流量需求（Gbps）"},
  {
    accessor: "actions",
    title: "操作",
    render: (item) => (
      <Button variant="light" color="violet" size="xs" leftSection={<IconLinkPlus size={16} />}>
        增加直连
      </Button>
    ),
  },
];

function ConnectAnalysisTable() {
  return (
    <DataTable
      // [1]样式配置
      striped // 斑马纹
      withTableBorder // 表格外边框
      withColumnBorders // 列边框（行边框是默认的，因此无需配置）
      highlightOnHover // 悬停高亮
      borderRadius="sm" // 表格边框圆角大小
      style={{whiteSpace: "nowrap"}} // 批量设置表格内容：永不换行
      pinLastColumn // 固定最后一列
      defaultColumnProps={{textAlign: "center", noWrap: true}} // 统一修改为居中对齐（默认左对齐）
      // height={300}
      // [2]数据渲染
      accessKey="id"
      records={mock}
      columns={renderColumns}
      // [3]易用性：表格空白
      // loadingText="加载中..." // 加载文字[可重写]
      minHeight={300} // 最小行高（ipdv2要求：行数固定为5时，最小行高为250）
      noRecordsText="无结果" // 无结果[可重写]
      // [4]易用性：数据加载状态
      // fetching={fetching} // 加载状态
      // loaderBackgroundBlur={4} // 加载时背景模糊程度
    />
  );
}
